<template>
  <div class="orderStatistics">
    <div class="head">
      <el-row type="flex" align="middle">
        <el-col :span="5" style="text-align: left">
          <p style="font-weight: 700">订单统计</p>
        </el-col>
        <el-col :span="5" :offset="8" type="flex" align="middle">
          <div>
            <el-tabs
              style="margin: 0"
              v-model="activeName"
              type="card"
              @tab-click="handleClick"
              :stretch="true"
            >
              <el-tab-pane label="本日" name="first"> </el-tab-pane>
              <el-tab-pane label="本周" name="second"></el-tab-pane>
              <el-tab-pane label="本月" name="third"></el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-date-picker
            v-model="dateValue"
            style="width: 100%"
            type="daterange"
            range-separator=""
            start-placeholder="请选择日期范围"
          >
          </el-date-picker>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <Echarts
        :echartsData="echartsData"
        :idName="'orderStatistics'"
        ref="echarts"
      ></Echarts>
    </div>
  </div>
</template>

<script>
import Echarts from "../../components/echarts.vue";
export default {
  components: {
    Echarts,
  },
  data() {
    return {
      activeName: "first",
      dateValue: "",
      optionData:{},
echartsData:{
  xAxisData: [
            "1:00",
            "2:00",
            "3:00",
            "4:00",
            "5:00",
            "6:00",
            "7:00",
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
            "24:00",
          ],
                series: [
          {
            lineStyle: {
              color: "#4bced0", // 设置线条颜色为红色
            },
            smooth: 0.3,
            // symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
            symbolSize: 5, //小圆点的大小
            itemStyle: {
              color: "#4bced0",
              borderColor: "#4bced0",
              borderWidth: 2,
              opacity: 0.8,
            },
            areaStyle: {
              color: "#c9f0f1",
            },

            name: "订单数量",
            type: "line",
            stack: "Total",
            emphasis: {
              focus: "series",
            },
            data:  [
              1000, 1302, 1001, 1334, 1660, 2000, 2000, 1422, 2034, 2204, 2420,
              1000, 1302, 1001, 1334, 1660, 2000, 2000, 3422, 2034, 2204, 2420,1311,
              2344, 543,
            ],
          },
          {
            lineStyle: {
              color: "#c5e6f6", // 设置线条颜色
            },
            smooth: 0.3,
            name: "成交订单",
            type: "line",
            stack: "Total",
            areaStyle: {
              color: "#c5e6f6",
            },
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              color: "#52c1f5",
              borderColor: "#52c1f5",
              borderWidth: 2,
              opacity: 0.8,
            },
            data:       [
              100, 132, 101, 134, 160, 200, 200, 322, 204, 204, 240, 100, 132,
              101, 134, 160, 200, 200, 322, 204, 204, 240, 23, 234,232
            ],
          },
        ],

},

      // optionData: [
      //   {
      //     name: "每日",
      //     data: [
      //       [
      //         100, 132, 101, 134, 160, 200, 200, 322, 204, 204, 240, 100, 132,
      //         101, 134, 160, 200, 200, 322, 204, 204, 240, 23, 234,232
      //       ], // 订单数量
      //       [
      //         1000, 1302, 1001, 1334, 1660, 2000, 2000, 1422, 2034, 2204, 2420,
      //         1000, 1302, 1001, 1334, 1660, 2000, 2000, 3422, 2034, 2204, 2420,1311,
      //         2344, 543,
      //       ], // 成交订单
      //     ],
      //     timeInterval: [
      //       "1:00",
      //       "2:00",
      //       "3:00",
      //       "4:00",
      //       "5:00",
      //       "6:00",
      //       "7:00",
      //       "8:00",
      //       "9:00",
      //       "10:00",
      //       "11:00",
      //       "12:00",
      //       "13:00",
      //       "14:00",
      //       "15:00",
      //       "16:00",
      //       "17:00",
      //       "18:00",
      //       "19:00",
      //       "20:00",
      //       "21:00",
      //       "22:00",
      //       "23:00",
      //       "24:00",
      //     ],
      //   },
      //   {
      //     name: "每周",
      //     data: [
      //       [100, 132, 101, 134, 160, 200, 200],
      //       [100, 1302, 101, 1334, 160, 200, 200],
      //     ],
      //     timeInterval: [
      //       "星期一",
      //       "星期二",
      //       "星期三",
      //       "星期四",
      //       "星期五",
      //       "星期六",
      //       "星期日",
      //     ],
      //   },
      //   {
      //     name: "每月",
      //     data: [
      //       [
      //         100, 1362, 1501, 1354, 1650, 2400, 2030, 3222, 2014, 2404, 100,
      //         1362, 1501, 1354, 1650, 2400, 2030, 3222, 2014, 2404, 100, 1362,
      //         1501, 1354, 1650, 2400, 2030, 3222, 2014, 2404,
      //       ],
      //       [
      //         1000, 102, 1001, 134, 1660, 2000, 200, 3422, 234, 2204, 1000, 102,
      //         1001, 134, 1660, 2000, 200, 3422, 234, 2204, 1000, 102, 1001, 134,
      //         1660, 2000, 200, 3422, 234, 2204,
      //       ],
      //     ],
      //     timeInterval: [
      //       "1",
      //       "2",
      //       "3",
      //       "4",
      //       "5",
      //       "6",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //       "7",
      //     ],
      //   },
      // ],

    };
  },
  // mounted() {
  //   this.option.xAxis[0].data = this.optionData[0].timeInterval;
  //   this.option.xAxis[0].axisLabel.interval =
  //     this.option.xAxis[0].data.length > 7 ? 1 : 0;

  //   this.option.series[0].data = this.optionData[0].data[0];
  //   this.option.series[1].data = this.optionData[0].data[1];
  // },
  methods: {
    handleClick(tab, event) {
      // console.log((tab.name))
      // this.echartsData.xAxisData = this.optionData.(tab.name).timeInterval;
      // this.option.xAxis[0].axisLabel.interval =
      //   this.option.xAxis[0].data.length > 7 ? 1 : 0;
      // this.option.series[0].data = this.optionData[+tab.index].data[0];
      // this.option.series[1].data = this.optionData[+tab.index].data[1];
      // this.$refs.echarts.show();
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
}
.head {
  padding-left: 20px;
  /* padding-top:20px */
}
.content {
  padding: 20px;
}
::v-deep .el-tabs__header {
  margin: 0;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 1px solid #dfe4ed;
}
</style>